@import '../global/variables.css';

:root,
:host {
  /* stylelint-disable-next-line color-no-hex */
  --ring-loader-inline-stops: #ff00eb, #bd3bff, #008eff, #58ba00, #f48700, #ff00eb;
}

:global(.ring-ui-theme-dark) {
  /* stylelint-disable-next-line color-no-hex */
  --ring-loader-inline-stops: #ff2eef, #d178ff, #289fff, #88d444, #ffe000, #ff2eef;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(calc(17 / 12));
  }
}

.loader,
:global(.ring-loader-inline) {
  /* needed for better backward-compatibility */

  position: relative;

  display: inline-block;

  overflow: hidden;

  transform: rotate(0);
  animation: spin 1s linear infinite;
  vertical-align: -3px;

  border-radius: var(--ring-unit);

  &,
  &::after {
    transform-origin: 50% 50%;
  }

  &::after {
    display: block;

    width: calc(var(--ring-unit) * 2);
    height: calc(var(--ring-unit) * 2);

    content: '';
    animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;

    background-image: conic-gradient(var(--ring-loader-inline-stops));
    mask-image: radial-gradient(var(--ring-unit), transparent 71.875%, var(--ring-content-background-color) 71.875%);
  }
}

.children {
  margin-left: calc(var(--ring-unit) / 2);
}
